<template>
  <div class="colleges-head" v-if="selectScenes">
    <div class="headCount maxW">
      <div class="collegesNavBar">
        <div id="headMenu">
          <div v-for="(item, index) of headMenuData" :key="index"
            :class="activeId == item.id ? 'active head-menu-item' : 'head-menu-item'" @click="menuTab(item.id, item)">
            <!-- 默认导航模块 -->
            <template v-if="item.is_default == 1">
              <router-link v-if="item.is_new_form == 0" :to="item.url">{{
                item.name
              }}</router-link>
              <router-link v-else :to="item.url" target="_blank" rel="noopener noreferrer">{{ item.name }}</router-link>
            </template>
            <!-- 自定义导航模块 -->
            <template v-else>
              <a v-if="item.is_new_form == 0" :href="item.url">{{
                item.name
              }}</a>
              <a v-else :href="item.url" target="_blank" rel="noopener noreferrer">{{ item.name }}</a>
            </template>
            <!-- 二级菜单 -->
            <div class="menu-hover-box" v-if="item.children.length > 0" :style="{ left: -index * 82 + 'px' }">
              <ul class="clear">
                <li v-for="(item1, index1) of item.children" :key="index1" @click="menuTab(item1.pid, item1)">
                  <!-- 默认导航模块 -->
                  <template v-if="item1.is_default == 1">
                    <router-link v-if="item1.is_new_form == 0" :to="item1.url">{{ item1.name }}</router-link>
                    <router-link v-else :to="item1.url" target="_blank" rel="noopener noreferrer">{{ item1.name }}
                    </router-link>
                  </template>
                  <!-- 自定义导航模块 -->
                  <template v-else>
                    <a v-if="item1.is_new_form == 0" :href="item1.url">{{
                      item1.name
                    }}</a>
                    <a v-else :href="item1.url" target="_blank" rel="noopener noreferrer">{{ item1.name }}</a>
                  </template>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="collegesLogo">
        <img class="logoImage" @click="pageHome" v-if="logo_url" :src="BASE_URL + logo_url" alt="logo" />
      </div>
      <div class="collegesSeachUserInfo">
        <div class="head-search" v-if="selectMenuData.length > 0">
          <template>
            <el-select v-model="selectVal" placeholder="请选择">
              <template v-for="(item, index) in selectMenuData">
                <el-option :key="index" :label="item.name" :value="item.url"></el-option>
              </template>
            </el-select>
          </template>
          <i class="gery-line"></i>
          <el-input placeholder="可搜想要的哦..." v-model="keyWord" class="input-with-select" clearable
            @keyup.enter.native="searchContent">
            <el-button type="primary" slot="append" @click="searchContent"><i class="search-icon"></i></el-button>
          </el-input>
        </div>
        <div class="login-info">
          <!-- 未登录 -->
          <div class="header-btns" v-if="!userData.userInfo.id">
            <el-button type="text" @click="goToLogin">登录</el-button>
            <template>
              <i class="cut">|</i>
              <router-link to="/register">
                <el-button type="text">注册</el-button>
              </router-link>
            </template>
          </div>
          <!--已登录 hover用户头像弹框 -->
          <el-popover v-else class="home-popover" placement="bottom" width="260" trigger="hover">
            <div class="userinfoH zIndexLevel">
              <div class="userinfoH_1">
                <a class="changeIdentity" href="javascript:;" v-if="userData.role.length > 1" @click="changeIdentity">
                  <i class="ipng icon_qiehuanshenfen"></i>
                  切换身份
                </a>
                <a class="managerole" href="javascript:;" v-if="userData.managerole" @click="goToMedule(1)">
                  <i class="ipng icon_guanlizhongxin"></i>
                  管理中心
                </a>
                <a class="messagerole" href="javascript:;" v-if="userData.messageFlag" @click="goToMedule(2)">
                  <el-badge :hidden="messageCount == 0" :value="messageCount" :max="99" class="message-count">
                    <i class="ipng icon_youjian"></i>
                    <i>我的消息</i>
                  </el-badge>
                </a>
                <!-- <template>
									<a class="personalfile" href="javascript:;" v-if="userData.role.indexOf(4) > -1" @click="goToMedule(4)">
										<i class="personalfile-icon"></i>
										个人档案
									</a>
								</template> -->
                <router-link class="home-settings" to="/setting">
                  <i class="ipng icon_shezhi"></i>
                  账号设置
                </router-link>
              </div>
              <a class="personalrole" href="javascript:;" v-if="userData.personalFlag" @click="goToMedule(3)">
                <i class="ipng icon_gerenzhongxin"></i>
                个人中心
              </a>
              <p class="safe-exit" @click="loginOut">安全退出</p>
            </div>
            <!-- 用户头像、名字、职称 -->
            <div class="user-info" slot="reference">
              <a href="javascript:;" class="user-info-a">
                <div class="avatar-img">
                  <img :src="BASE_URL + userData.userInfo.avatar_path" :onerror="errorImg" />
                </div>
                <div class="avatar-text">
                  <i class="userName" :title="userData.userInfo.name">{{
                    userData.userInfo.name
                  }}</i>
                  <em class="roleName" :title="userData.userInfo.check_role_name">{{ userData.userInfo.check_role_name
                  }}</em>
                </div>
              </a>
            </div>
          </el-popover>
        </div>
      </div>
    </div>
  </div>
  <div class="home-head" v-else>
    <div id="searchBar" :class="[searchBarFixed == true ? 'isfixed' : '']">
      <div class="header-cont maxW clear">
        <!-- logo -->
        <div class="logo fl" @click="pageHome">
          <img v-if="logo_url" :src="BASE_URL + logo_url" alt="logo" />
        </div>
        <div class="login-info fr">
          <!-- 未登录 -->
          <div class="header-btns" v-if="!userData.userInfo.id">
            <el-button type="text" @click="goToLogin">登录</el-button>
            <template>
              <i class="cut">|</i>
              <router-link to="/register">
                <el-button type="text">注册</el-button>
              </router-link>
            </template>
          </div>
          <!--已登录 hover用户头像弹框 -->
          <el-popover v-else class="home-popover" placement="bottom" width="260" trigger="hover">
            <div class="userinfoH">
              <div class="userinfoH_1">
                <a class="changeIdentity" href="javascript:;" v-if="userData.role.length > 1" @click="changeIdentity">
                  <i class="ipng icon_qiehuanshenfen"></i>
                  切换身份
                </a>
                <a class="managerole" href="javascript:;" v-if="userData.managerole" @click="goToMedule(1)">
                  <i class="ipng icon_guanlizhongxin"></i>
                  管理中心
                </a>
                <a class="messagerole" href="javascript:;" v-if="userData.messageFlag" @click="goToMedule(2)">
                  <el-badge :hidden="messageCount == 0" :value="messageCount" :max="99" class="message-count">
                    <i class="ipng icon_youjian"></i>
                    <i>我的消息</i>
                  </el-badge>
                </a>
                <!-- <template>
									<a class="personalfile" href="javascript:;" v-if="userData.role.indexOf(4) > -1" @click="goToMedule(4)">
										<i class="personalfile-icon"></i>
										个人档案
									</a>
								</template> -->
                <router-link class="home-settings" to="/setting">
                  <i class="ipng icon_shezhi"></i>
                  账号设置
                </router-link>
              </div>
              <a class="personalrole" href="javascript:;" v-if="userData.personalFlag" @click="goToMedule(3)">
                <i class="ipng icon_gerenzhongxin"></i>
                个人中心
              </a>
              <p class="safe-exit" @click="loginOut">安全退出</p>
            </div>
            <!-- 用户头像、名字、职称 -->
            <div class="user-info" slot="reference">
              <a href="javascript:;" class="user-info-a">
                <div class="avatar-img">
                  <img :src="BASE_URL + userData.userInfo.avatar_path" :onerror="errorImg" />
                </div>
                <div class="avatar-text">
                  <i class="userName" :title="userData.userInfo.name">{{
                    userData.userInfo.name
                  }}</i>
                  <em class="roleName" :title="userData.userInfo.check_role_name">{{ userData.userInfo.check_role_name
                  }}</em>
                </div>
              </a>
            </div>
          </el-popover>
        </div>
        <!-- 头部搜索框 -->
        <div class="head-search fr" v-if="selectMenuData.length > 0">
          <template>
            <el-select v-model="selectVal" placeholder="请选择">
              <template v-for="(item, index) in selectMenuData">
                <el-option :key="index" :label="item.name" :value="item.url"></el-option>
              </template>
            </el-select>
          </template>
          <i class="gery-line"></i>
          <el-input placeholder="可搜想要的哦..." v-model="keyWord" class="input-with-select" clearable
            @keyup.enter.native="searchContent">
            <el-button type="primary" slot="append" @click="searchContent"><i class="search-icon"></i></el-button>
          </el-input>
        </div>
      </div>
    </div>
    <!-- 头部导航栏 -->
    <div class="i_nav maxW" v-show="searchBarFixed == false">
      <div id="head-menu">
        <div v-for="(item, index) of headMenuData" :key="index" :class="activeId == item.id ? 'active head-menu-item' : 'head-menu-item'
          " @click="menuTab(item.id, item)">
          <!-- 默认导航模块 -->
          <template v-if="item.is_default == 1">
            <router-link v-if="item.is_new_form == 0" :to="item.url">{{
              item.name
            }}</router-link>
            <router-link v-else :to="item.url" target="_blank" rel="noopener noreferrer">{{ item.name }}</router-link>
          </template>
          <!-- 自定义导航模块 -->
          <template v-else>
            <a v-if="item.is_new_form == 0" :href="item.url">{{ item.name }}</a>
            <a v-else :href="item.url" target="_blank" rel="noopener noreferrer">{{ item.name }}</a>
          </template>
          <!-- 二级菜单 -->
          <div class="menu-hover-box" v-if="item.children.length > 0" :style="{ left: -index * 102 + 'px' }">
            <ul class="clear">
              <li v-for="(item1, index1) of item.children" :key="index1" @click="menuTab(item1.pid, item1)">
                <!-- 默认导航模块 -->
                <template v-if="item1.is_default == 1">
                  <router-link v-if="item1.is_new_form == 0" :to="item1.url">{{
                    item1.name
                  }}</router-link>
                  <router-link v-else :to="item1.url" target="_blank" rel="noopener noreferrer">{{ item1.name }}
                  </router-link>
                </template>
                <!-- 自定义导航模块 -->
                <template v-else>
                  <a v-if="item1.is_new_form == 0" :href="item1.url">{{
                    item1.name
                  }}</a>
                  <a v-else :href="item1.url" target="_blank" rel="noopener noreferrer">{{ item1.name }}</a>
                </template>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 切换身份弹窗 -->
    <el-dialog title="切换身份" class="common-dialog identity-dialog" width="400px" :visible.sync="dialogVisible">
      <div>
        <ul class="role-ul">
          <li v-for="(item, index) in userData.userInfo.role" :key="index" @click="currentRole = item">
            <span class="role-icon">
              <i v-if="item == 6" class="ipng icon_laoshi"></i>
              <i v-else-if="item == 5" class="ipng icon_jiahzhang"></i>
              <i v-else class="ipng icon_guanliyuan"></i>
              <i v-show="currentRole == item" class="ipng Select01"></i>
            </span>
            <span class="rolename">{{
              userData.userInfo.rolename[index]
            }}</span>
          </li>
        </ul>
      </div>
      <div class="foot-btns">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeRole">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { fail } from "assert";
export default {
  props: {
    pathOption: {
      personal: "", //个人中心跳转路径
      manage: "", //后台跳转路径
    },
    userData: {},
  },
  data() {
    return {
      logo_url: "", //logo地址
      activeId: "", //导航栏高亮
      headMenuData: [], //导航栏数据
      keyWord: "", //搜索输入的关键字
      selectVal: "", //搜索框左侧下拉框选中项
      searchBarFixed: false, //是否固定在顶部的判断
      dialogVisible: false, //切换身份弹窗
      messageCount: 0, //我的消息数量
      casFlag: false, //是否是单点登录
      scrollHandler: null, //页面滚动触发器
      errorImg:
        'this.src="' +
        require("../../../../public/images/user_preview-1.png") +
        '"',
      currentRole: 0,
      selectScenes: 0,
    };
  },
  created() {
    // this.getScene();
    this.homeLogo();
    this.getHeadMenu();
    this.checkCas();
  },
  computed: {
    // 从导航栏数据里面筛选出select框的数据：
    selectMenuData() {
      if (this.headMenuData && this.headMenuData.length > 0) {
        let data = [];
        //只选择资源和课程下属的部分，且去掉全部这个选项
        this.headMenuData.filter((x) => {
          if (
            x.children.length > 0 &&
            (x.data_type === "resource" || x.data_type === "course")
          ) {
            const delAllItem = x.children.filter((y) => y.name != "全部");
            data = [...data, ...delAllItem];
          }
        });
        return data;
      } else {
        return [];
      }
    },
    CheckSchoolAppCode() {
      let code = sessionStorage.getItem("CheckSchoolAppCode");
      return code ? code : "00000000000000000000000000000000";
    },
  },
  mounted() {
    this.checkWap();
    this.messageUnread();
    //页面下滚，顶部导航栏吸顶。此处通过原生js监听scroll的高度如果超过导航条长度103px就出发吸顶，
    //但是频繁触发scoll resize这类事件都是很耗费性能的，此处调用debounce函数对scroll事件进行延迟处理，设定时间仅调用最后一次，
    //这样页解决了不断的上下滚动页面时，页面出现上下抖动的问题。
    this.scrollHandler = this.debounce(() => {
      this.handleScroll();
    }, 100);
    window.addEventListener("scroll", this.scrollHandler);

    // // 根据地址栏是有关键字参数的，判断是否在页面刷新时，把之前的数据重新展示
    if (this.$route.query.keyword == undefined) {
      this.selectVal = "";
      this.keyWord = "";
      sessionStorage.setItem("selectVal", "/home/resourceList");
    } else {
      this.selectVal = sessionStorage.getItem("selectVal");
      this.keyWord = this.$route.query.keyword;
    }
  },
  watch: {
    // 路由变化的时候，也切换菜单选中高亮效果
    $route: {
      handler(to, from) {
        this.setActive();
      },
      immediate: true,
    },
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollHandler); //移除页面滚动事件的监听
  },
  methods: {
    getScene() {
      const success = (res) => {
        this.selectScenes = res.data - 1;
        // 1：为k12版，2：为高教版
      };
      this.$ajax.get("api/login/frontVersion", { func: { success } });
    },
    // 判断当前登陆的是手机用户还是pc用户
    checkWap() {
      let success = (res) => {
        if (res.data == "yes") {
          window.location.href = `${window.location.origin}/wap/home`;
        }
      };
      this.$ajax.get("api/login/get_use_hls", {
        params: {},
        func: { success: success },
      });
    },
    // 判断当前是否单点登录跳
    checkCas() {
      let success = (res) => {
        this.casFlag = res.data == "yes" ? true : false;
      };
      this.$ajax.get("api/login/get_use_single_login", {
        params: {},
        func: { success: success },
      });
    },
    // 跳转到登录页
    goToLogin() {
      let host = sessionStorage.getItem("host_addr");
      if (this.casFlag == false) {
        this.$router.push('/manage/login')
      } else {
        // 单点登录
        window.location.href =
          host +
          "/cas/login?lastpage=" +
          host +
          "/index" +
          "&CheckSchoolAppCode=" +
          this.CheckSchoolAppCode;
      }
    },
    //页面向下滚动的时候，搜索栏吸顶事件
    handleScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // var offsetTop = document.querySelector("#searchBar").offsetTop;
      this.searchBarFixed = scrollTop > 103 ? true : false;
    },
    //延迟处理
    debounce(func, wait, immediate) {
      let timeout, args, context, timestamp, result;
      const later = function() {
        // 据上一次触发时间间隔
        const last = +new Date() - timestamp;

        // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
        if (last < wait && last > 0) {
          timeout = setTimeout(later, wait - last);
        } else {
          timeout = null;
          // 如果设定为immediate===true，因为开始已经调用过了此处无需调用
          if (!immediate) {
            result = func.apply(context, args);
            if (!timeout) context = args = null;
          }
        }
      };
      return function(...args) {
        context = this;
        timestamp = +new Date();
        const callNow = immediate && !timeout;
        // 如果延时不存在，重新设定延时
        if (!timeout) timeout = setTimeout(later, wait);
        if (callNow) {
          result = func.apply(context, args);
          context = args = null;
        }

        return result;
      };
    },
    // 获取页面头部导航栏的数据
    getHeadMenu() {
      let success = (res) => {
        if (res.data) {
          this.headMenuData = res.data;
          this.setActive();
        }
      };
      this.$ajax.get("api/system/get_home_menu_cansee", {
        params: {},
        func: { success: success },
      });
    },
    // 导航栏点击事件
    menuTab(id, item) {
      this.keyWord = "";
    },
    // 设置导航栏的高亮显示
    setActive() {
      // 拿当前路由的地址和导航栏数据里面一级二级数据的url做对比
      // 相等的话，就拿到该项的id(一级菜单的)或者pid(二级菜单的)，如果都不相等，则默认选择第一项设置高亮
      let routePath = this.$route.path;
      let _data = this.headMenuData;
      outer: for (let i = 0; i < _data.length; i++) {
        let item = _data[i];
        if (routePath === item.url) {
          this.activeId = item.id;
          break outer;
        } else {
          if (item.children.length > 0) {
            for (let j = 0; j < item.children.length; j++) {
              if (routePath === item.children[j].url) {
                this.activeId = item.children[j].pid;
                break outer;
              } else {
                this.activeId = _data[0].id;
              }
            }
          }
        }
      }
    },
    // 点击logo事件
    pageHome() {
      window.location.href = sessionStorage.getItem("host_addr");
    },
    //获取logo
    homeLogo() {
      let success = (res) => {
        this.logo_url = res.data[0].f_logo;
      };
      this.$ajax({
        url: "api/system/get_logo",
        method: "get",
        params: {},
        func: { success: success },
      });
    },

    // hover用户头像弹窗里面的跳转
    goToMedule(module) {
      let host = sessionStorage.getItem("host");
      let token = sessionStorage.getItem("token");
      let protocol = sessionStorage.getItem("protocol");
      switch (module) {
        // 跳去管理中心
        case 1:
          window.location.href =
            "/admin/login?token=" +
            token +
            "&protocol=" +
            protocol +
            "&host=" +
            host +
            "&CheckSchoolAppCode=" +
            this.CheckSchoolAppCode;
          break;
        // 跳去个人中心的我的消息
        case 2:
          window.location.href =
            "/personal/login?token=" +
            token +
            "&protocol=" +
            protocol +
            "&host=" +
            host +
            "&routerUrl=message" +
            "&CheckSchoolAppCode=" +
            this.CheckSchoolAppCode;
          break;
        // 跳去个人中心
        case 3:
          window.location.href =
            "/personal/login?token=" +
            token +
            "&protocol=" +
            protocol +
            "&host=" +
            host +
            "&CheckSchoolAppCode=" +
            this.CheckSchoolAppCode;
          break;
        case 4:
          this.checkUrl("schoolroll");
          break;
      }
    },
    // 检验是否有跳转到前台某个模块的权限
    checkUrl(url) {
      let success = (res) => {
        this.$router.push("/" + url);
      };
      this.$ajax.get("/api/login/checkthisnode", {
        params: {
          url: url,
          token: sessionStorage.getItem("token"),
          checkschoolappcode: this.CheckSchoolAppCode,
        },
        func: { success: success },
      });
    },
    // 退出登录
    loginOut() {
      this.$store.commit("SET_OUTLOGIN", true);
    },
    // 搜索按钮点击事件：（页头搜索框+跳转）
    searchContent() {
      // 当点击的时候，把选中跳转模块的值缓存
      sessionStorage.setItem("selectVal", this.selectVal);
      // 根据选中值跳转
      let routerPath =
        this.keyWord.trim() === ""
          ? this.selectVal
          : { path: this.selectVal, query: { keyword: this.keyWord } };
      this.$router.push(routerPath);
    },
    changeIdentity() {
      this.currentRole = this.userData.checkRole;
      this.dialogVisible = true;
    },
    //切换身份弹窗的确定按钮
    changeRole() {
      let success = (data) => {
        this.$emit("checkLogin");
        this.dialogVisible = false;
        this.$message.success("已切换身份");
      };
      this.$ajax({
        url: "/api/login/check_login_section",
        method: "put",
        data: {
          check_role: this.currentRole,
        },
        func: { success: success },
      });
    },
    // 我的消息未读数量
    messageUnread() {
      //是否登录
      if (this.$g.user_id == 0) {
        return false;
      }
      let success = (res) => {
        let count = 0;
        for (let i = 0; i < res.data.length; i++) {
          count += parseInt(res.data[i].num);
        }
        this.messageCount = count;
      };
      this.$ajax({
        url: "api/message/message_unread_count",
        method: "get",
        params: {},
        func: { success: success },
      });
    },
  },
};
</script>

<style lang="scss">
.personalfile-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("../../../assets/images/archives-icon.png") no-repeat;
}

.home-head {
  width: 100%;
  height: 139px;
  background: #fff;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);

  .el-popover {
    width: 260px;
    top: 75px;
  }
}

.header-cont {
  height: 48px;
  line-height: 48px;
  padding: 20px 0 35px;

  .logo {
    width: 187px;
    height: 50px;
    overflow: hidden;

    img {
      max-width: 100%;
      object-fit: cover;
    }
  }

  .head-search {
    position: relative;
    width: 320px;

    .el-select {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 50;

      .el-input {
        width: 84px;
      }

      .el-input__inner {
        padding: 0 8px;
        border: 1px solid transparent;
        background: transparent;
        color: #444;
      }

      .el-input__icon {
        width: 14px;
      }

      .el-icon-arrow-up:before {
        // content: "\E78F";
      }
    }

    .gery-line {
      display: block;
      height: 16px;
      position: absolute;
      top: 15px;
      left: 84px;
      z-index: 50;
      border-left: 1px solid #e0e0e0;
    }

    .input-with-select {
      .el-input__inner {
        padding: 0 25px 0 90px;
        height: 48px;
      }

      .el-input-group__append {
        padding: 0 10px;
        color: #fff;
        background-color: #338efc;
        border: 1px solid #338efc;

        .search-icon {
          background-position: -26px -812px;
          width: 16px;
          height: 17px;
          background-image: url("../../../../public/images/ipng.png");
          background-repeat: no-repeat;
          display: inline-block;
          vertical-align: top;
        }
      }
    }
  }

  .header-btns {
    display: inline-block;
    margin-left: 40px;

    .cut {
      padding: 0 5px;
    }
  }
}

.isfixed {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  z-index: 999;

  .header-cont {
    padding: 10px 0;
  }
}

.el-select-dropdown {
  .el-select-dropdown__item {
    padding: 0 14px;
  }

  .el-select-dropdown__item.hover {
    color: #fff;
    background-color: #338efc;
  }
}

.user-info {
  display: inline-block;
  margin-left: 40px;

  .user-info-a {
    display: inline-block;
  }

  .avatar-img {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    vertical-align: middle;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .avatar-text {
    display: inline-block;
    width: 80px;
    height: 48px;
    margin-left: 10px;
    position: relative;
    vertical-align: middle;

    .userName {
      top: -10px;
    }

    .roleName {
      top: 8px;
      color: #999;
    }

    .userName,
    .roleName {
      width: 100%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      position: absolute;
      left: 0;
    }
  }
}

.userinfoH {
  .safe-exit {
    font-size: 14px;
    // color: #888888;
    cursor: pointer;
    margin: 5px 20px 5px;
    display: inline-block;
  }

  .safe-exit:hover {
    color: #ffacac;
  }
}

.userinfoH_1 {
  width: 220px;
  padding: 12px 20px 0;
  // text-align: justify;
  // text-align-last: justify;
  overflow: hidden;
  font-size: 12px;
}

.userinfoH_1>a {
  margin-bottom: 13px;
  display: inline-block;
  vertical-align: top;
  text-align: left;
  text-align-last: initial;
  width: 100px;
  height: 36px;
  line-height: 36px;
  color: #333;
  background-color: #efefef;
  border-radius: 3px;
  text-align: center;
}

.userinfoH_1>a:nth-child(2n) {
  margin-left: 20px;
}

.userinfoH_1>a>i {
  margin-right: 5px;
  vertical-align: middle;
}

.userinfoH_1>a:hover {
  color: #2f6d8c;
  background: #d8effc;
}

.messagerole .el-badge {
  .el-badge__content.isfixed {
    right: 12px;
  }

  i {
    vertical-align: middle;
  }

  i:nth-child(1) {
    margin-right: 5px;
  }
}

.personalrole {
  display: block;
  background: #efefef;
  border-radius: 3px;
  height: 36px;
  line-height: 36px;
  text-indent: 15px;
  margin: 0 20px 10px 20px;
}

.personalrole>i {
  margin-right: 60px;
  vertical-align: middle;
}

.personalrole:hover {
  color: #2f6d8c;
  background: #d8effc;
}

#head-menu {
  height: 36px;
  display: flex;

  .head-menu-item {
    height: 26px;
    line-height: 22px;
    text-align: center;
    border-bottom: none;
    border-radius: 10px;
    font-size: 16px;
    padding: 0;
    margin-right: 40px;
    color: #000;
    position: relative;

    a {
      display: inline-block;
      padding: 0 14px;
      height: 26px;
      line-height: 26px;
      border-radius: 10px;
    }

    &:hover {
      .menu-hover-box {
        display: block;
      }
    }
  }

  .head-menu-item.active {
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color: #338efc;
    border-bottom: none;

    >a {
      color: #fff;
    }
  }
}

.menu-hover-box {
  display: none;
  position: absolute;
  width: 1200px;
  left: 0;
  bottom: -50px;
  z-index: 2001;
  height: 50px;
  line-height: 50px;
  background-color: #fff;
  -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);

  ul {
    padding: 0 30px;
  }

  li {
    float: left;
    color: #000;

    &:hover>a {
      color: #338efc;
    }

    a {
      margin-right: 40px;
      font-size: 14px;
    }
  }
}

.identity-dialog {
  .role-ul {
    padding: 20px;
    text-align: center;

    li {
      display: inline-block;
      margin-bottom: 20px;
      cursor: pointer;
      width: 100px;

      span {
        display: inline-block;
        vertical-align: top;
        width: 100%;
        text-align: center;
      }

      .rolename {
        margin-top: 15px;
      }
    }

    .role-icon {
      position: relative;

      .Select01 {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  .foot-btns {
    text-align: center;
    margin: 20px 0;
  }
}

.el-popover {
  font-size: 12px;
}

.colleges-head {
  height: 90px;
  background-color: #273252;
  position: sticky;
  position: -webkit-sticky;
  top: 0px;
  z-index: 998;

  .headCount {
    height: 90px;
    background: url("../../../assets/images/logoBox.png") no-repeat;
    background-position: center;
    display: flex;

    .collegesNavBar {
      width: 470px;
      display: flex;
      align-items: center;

      #headMenu {
        // width: 450px;
        height: 36px;
        display: flex;

        // justify-content: space-around;
        .head-menu-item+.head-menu-item {
          margin-left: 20px;
        }

        .head-menu-item {
          height: 26px;
          line-height: 22px;
          text-align: center;
          border-bottom: none;
          border-radius: 2px;
          font-size: 16px;
          color: #fff;
          position: relative;

          a {
            display: inline-block;
            padding: 0 14px;
            height: 26px;
            line-height: 26px;
            border-radius: 2px;
            color: #fff;
          }

          &:hover {
            .menu-hover-box {
              display: block;
            }
          }
        }

        .head-menu-item.active {
          -moz-border-radius: 10px;
          border-radius: 10px;
          background-color: #338efc;
          border-bottom: none;

          >a {
            color: #fff;
          }
        }
      }

      .menu-hover-box {
        display: none;
        position: absolute;
        width: 470px;
        border-radius: 30px;
        left: 0;
        bottom: -50px;
        z-index: 2001;
        height: 50px;
        line-height: 50px;
        background-color: #273252;
        -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);

        ul {
          padding: 0 30px;
        }

        li {
          float: left;
          color: #000;

          &:hover>a {
            color: #338efc;
          }

          a {
            margin-right: 40px;
            font-size: 14px;
          }
        }
      }
    }

    .collegesLogo {
      width: 260px;
      display: flex;
      justify-content: center;
      align-items: center;

      .logoImage {
        width: 190px;
        height: 48px;
      }
    }

    .collegesSeachUserInfo {
      padding-left: 52px;
      width: 418px;
      display: flex;
      align-items: center;

      .head-search {
        position: relative;
        width: 260px;

        .el-select {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 50;

          .el-input {
            width: 80px;
          }

          .el-input__inner {
            padding: 19px 8px;
            border: 1px solid #fff;
            background: #273252;
            color: #fff;
            font-size: 12px;
          }

          .el-input__icon {
            width: 14px;
          }

          .el-icon-arrow-up:before {
            // content: "\E78F";
          }
        }

        .gery-line {
          display: block;
          height: 16px;
          position: absolute;
          top: 15px;
          left: 80px;
          z-index: 50;
          border-left: 1px solid #e0e0e0;
        }

        .input-with-select {
          .el-input__inner {
            padding: 0 25px 0 85px;
            height: 40px;
          }

          .el-input-group__append {
            padding: 0 10px;
            color: #fff;
            background-color: #338efc;
            border: 1px solid #338efc;

            .search-icon {
              background-position: -26px -812px;
              width: 16px;
              height: 17px;
              background-image: url("../../../../public/images/ipng.png");
              background-repeat: no-repeat;
              display: inline-block;
              vertical-align: top;
            }
          }
        }
      }

      .login-info {
        .zIndexLevel {
          z-index: 999;
        }

        .user-info {
          display: inline-block;
          margin-left: 37px;

          .user-info-a {
            display: inline-block;
          }

          .avatar-img {
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            overflow: hidden;
            vertical-align: middle;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .avatar-text {
            display: inline-block;
            width: 80px;
            height: 48px;
            margin-left: 10px;
            position: relative;
            vertical-align: middle;

            .userName {
              top: 7px;
              color: #fff;
              font-size: 12px;
            }

            .roleName {
              top: 26px;
              color: #fff;
              font-size: 12px;
            }

            .userName,
            .roleName {
              width: 100%;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              position: absolute;
              left: 0;
            }
          }
        }

        .header-btns {
          display: inline-block;
          margin-left: 80px;

          .el-button {
            color: #fff;
          }

          .cut {
            padding: 0 5px;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
